import { useState } from 'react'
import { Button } from '@/library/gallery/components/Button'
import { WaterMark } from '@/library/gallery/components/WaterMark'
import './index.scss'

const textProps = {
  content: 'qiang.yan',
}

const rowsTextProps = {
  content: ['qiang.yan', 'peng.zhang', 'a.b'],
}

const imageProps = {
  image: 'https://gw.alipayobjects.com/zos/bmw-prod/59a18171-ae17-4fc5-93a0-2645f64a3aca.svg',
  imageWidth: 115,
  imageHeight: 36,
  width: 140,
  height: 80,
}

export default (): React.ReactNode => {
  const [props, setProps] = useState<{ [key: string]: any }>(rowsTextProps)

  return (
    <div className="water-mark-overlay">
      <Button onClick={() => setProps(textProps)}>普通水印</Button>
      <br />
      <Button onClick={() => setProps(rowsTextProps)}>多行文字水印</Button>
      <br />
      <Button onClick={() => setProps(imageProps)}>图片水印</Button>
      <WaterMark {...props} />
    </div>
  )
}
